<!--
 * @Author: gao_m3
 * @Date: 2020-09-18 10:12:57
 * @LastEditors: wei_jt@ecidi.com
 * @Descripttion: 账号与密码
-->
<template>
  <div class="account-container">
    <fks-row :gutter="16" type="flex" justify="center">
      <fks-col :xs="20" :sm="18" :md="18" :lg="12" :xl="12">
        <div class="title">
          <div class="fks-title-icon" />
          <div>{{ LANG.PWD_STRATEGY }}</div>
        </div>
        <div class="row-content-container">
          <div class="row-content">
            <fks-radio-group v-model="form.passwordLevel" class="switch-item">
              <fks-radio
                class="switch-item flex"
                label="easy"
                style="display: inline-block"
              >
                <span>{{ LANG.BASIC }}</span>
                <fks-tooltip placement="top-start">
                  <div
                    slot="content"
                    style="font-size: 14px; line-height: 20px"
                    class="tips-container"
                  >
                    {{ LANG.BASIC_LIMIT }}
                  </div>
                  <i class="fks-icon-question" />
                </fks-tooltip>
              </fks-radio>
              <fks-radio
                class="switch-item flex"
                label="normal"
                style="display: inline-block"
              >
                <span>{{ LANG.SAFE }}</span>
                <fks-tooltip placement="top-start">
                  <div
                    slot="content"
                    style="font-size: 14px; line-height: 20px"
                    class="tips-container"
                  >
                    {{ LANG.SAFE_LIMIT }}
                  </div>
                  <i class="fks-icon-question" />
                </fks-tooltip>
              </fks-radio>
              <fks-radio
                class="switch-item flex"
                label="custom"
                style="display: inline-block"
              >
                <span>{{ LANG.CUSTOM }}</span>
              </fks-radio>
            </fks-radio-group>
          </div>
          <fks-divider />
          <div class="row-content">
            <div>{{ LANG.PWD_MIN }}</div>
            <fks-input-number
              v-model="form.pwMinLength"
              :disabled="form.passwordLevel != 'custom'"
              :min="6"
              :max="form.pwMaxLength - 1"
            />
          </div>
          <fks-divider />
          <div class="row-content">
            <div>{{ LANG.PWD_MAX }}</div>
            <fks-input-number
              v-model="form.pwMaxLength"
              :disabled="form.passwordLevel != 'custom'"
              :min="form.pwMinLength + 1"
              :max="50"
            />
          </div>
          <fks-divider />
          <div class="row-content inputx">
            <div>{{ LANG.PWD_CHAR }}</div>
            <fks-select
              v-model="form.charDemand"
              :disabled="form.passwordLevel != 'custom'"
              :placeholder="LANG.PLEASE_SELECT"
              class="char_demand"
            >
              <fks-option
                v-for="item in charDemands"
                :key="item.code"
                :label="item[$lang]"
                :value="item.code"
              />
            </fks-select>
          </div>
          <fks-divider />
          <div class="row-content">
            <div>{{ LANG.PWD_DEFAULT }}</div>
            <fks-switch
              v-model="form.openDefaultPassword"
              class="drawer-switch"
            />
          </div>
          <fks-divider />
          <div
            v-if="form.openDefaultPassword == true"
            class="row-content inputx"
          >
            <div>{{ LANG.PWD_INIT }}</div>
            <fks-input
              v-model="form.initialPassword"
              style="width: 280px"
              show-password
              maxlength="50"
            />
          </div>
        </div>
      </fks-col>
    </fks-row>
    <fks-row :gutter="16" type="flex" justify="center">
      <fks-col :xs="20" :sm="18" :md="18" :lg="12" :xl="12">
        <div class="title">
          <div class="fks-title-icon" />
          <div>{{ LANG.INFO_CHECK }}</div>
        </div>
        <div class="row-content-container">
          <div class="row-content">
            <div>
              <span>{{ LANG.PWD_CHECK }}</span>
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.PWD_TIP }}
                </div>
                <i class="fks-icon-question" />
              </fks-tooltip>
            </div>
            <fks-switch v-model="form.sensitiveInfo" />
          </div>
          <fks-divider />
          <div class="row-content">
            <div>
              <span> {{ LANG.USER_CHECK }}</span>
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.USER_SENSI_TIP }}
                </div>
                <i class="fks-icon-question" />
              </fks-tooltip>
            </div>
            <fks-switch v-model="form.sensitiveCheck" />
          </div>
        </div>
      </fks-col>
    </fks-row>
    <fks-row :gutter="16" type="flex" justify="center">
      <fks-col :xs="20" :sm="18" :md="18" :lg="12" :xl="12">
        <div class="title">
          <div class="fks-title-icon" />
          <div>{{ LANG.PWD_EXPIRATION_POLICY }}</div>
        </div>
        <div class="row-content-container">
          <div class="row-content">
            <div>
              <span> {{ LANG.PWD_EXP }}</span>
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.PWD_EXPI_TIP }}
                </div>
                <i class="fks-icon-question" />
              </fks-tooltip>
            </div>
            <div>
              <fks-input-number v-model="form.pwdExpiredTime" :min="0" />
              <span style="margin: 0 6px">{{ LANG.DAY }}</span>
            </div>
          </div>
          <fks-divider />
          <div class="row-content inputx">
            <div>
              <span> {{ LANG.PWD_CHANGE_TIP }}</span>
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.PWD_EXPIRATION_TIP }}
                </div>
                <i class="fks-icon-question" />
              </fks-tooltip>
            </div>
            <fks-select v-model="form.mandatoryModify">
              <fks-option
                v-for="item in mandatoryModify"
                :key="item.code"
                :label="item[$lang]"
                :value="item.code"
              />
            </fks-select>
          </div>
        </div>
      </fks-col>
    </fks-row>
    <div style="margin-bottom: 36px; text-align: center">
      <fks-button
        v-permission="['account:refresh']"
        icon="fks-icon-turn-right"
        @click="init"
      >
        {{ LANG.REDUCTION }}
      </fks-button>
      <fks-button
        v-permission="['account:update']"
        type="primary"
        icon="fks-icon-check"
        :loading="loading"
        @click="submit"
      >
        {{ LANG.UPDATE }}
      </fks-button>
    </div>
  </div>
</template>

<script>
import Mix from '@/mixins/module'
import {
  PUT_CLIENT_CONFIG,
  GET_LATEST_CLIENT_CONFIG
} from '@/store/Action/actionTypes'
import { LATEST_CLIENT_CONFIG } from '@/store/State/stateTypes'

export default {
  name: 'AccountConfig',
  mixins: [Mix],
  data() {
    return {
      loading: false,
      hasSubmitted: false,
      labelPosition: 'left',
      loginWay: [],
      isIndeterminate: true,
      allWay: false,
      loginWays: ['手机号', '二维码', '微信'],
      firstAccess: true,
      form: {
        mandatoryModify: 0, //密码修改策略
        charDemand: '0', //密码字符要求
        pwdExpiredTime: 0, //密码有效期
        passwordLevel: 'easy', //密码策略
        pwMinLength: 0,
        pwMaxLength: 0,
        sensitiveInfo: false, //密码敏感校验
        sensitiveCheck: false, //用户名敏感校验
        initialPassword: '',
        openDefaultPassword: false //默认密码开启
      },
      tempCustom: {}
    }
  },
  computed: {
    charDemands() {
      return this.$store.state.enum.pwdComplexity
    },
    mandatoryModify() {
      return this.$store.state.enum.accountTip
    },
    latestClientConfig() {
      return this.$store.state[LATEST_CLIENT_CONFIG]
    }
  },
  watch: {
    'form.passwordLevel': {
      immediate: true,
      deep: true,
      handler: function (val) {
        if (this.firstAccess) {
          this.firstAccess = false
          return
        }
        switch (val) {
          case 'easy':
            this.form.pwMinLength = 6
            this.form.pwMaxLength = 32
            this.form.charDemand = '0'
            break
          case 'normal':
            this.form.pwMinLength = 8
            this.form.pwMaxLength = 48
            this.form.charDemand = '1'
            break
          case 'custom':
            this.form.pwMinLength = 8
            this.form.pwMaxLength = 50
            break
        }
      }
    },
    latestClientConfig(nval) {
      this.form = { ...nval.additionalInformation.accountConfig }
    }
  },
  mounted() {
    this.$store.dispatch(GET_LATEST_CLIENT_CONFIG)
  },
  methods: {
    init() {
      this.form = {
        ...this.latestClientConfig.additionalInformation.accountConfig
      }
      this.$message(this.LANG.REDUCTION_TIP)
    },
    /**
     * @description: 提交保存修改
     */
    submit() {
      this.loading = true
      let sub = true
      let accountConfig = Object.assign({}, this.form)
      switch (this.form.passwordLevel) {
        case 'easy':
          accountConfig = Object.assign(accountConfig, {
            passwordLevel: 'easy',
            pwMinLength: 6,
            pwMaxLength: 32,
            charDemand: '0'
          })
          break
        case 'normal':
          accountConfig = Object.assign(accountConfig, {
            passwordLevel: 'normal',
            pwMinLength: 8,
            pwMaxLength: 50,
            charDemand: '1'
          })
          break
        case 'custom':
          accountConfig = Object.assign(accountConfig, this.form)
          break
      }
      if (this.form.openDefaultPassword)
        if (!this.form.initialPassword) {
          this.$message.error(this.LANG.NONE_PWD)
          sub = false
        }
      if (sub) {
        //默认密码通过校验
        let additionalInfo = {
          ...this.latestClientConfig.additionalInformation,
          accountConfig
        }
        let settingsJSON = {
          ...this.latestClientConfig,
          additionalInformation: additionalInfo
        }
        this.$store
          .dispatch(PUT_CLIENT_CONFIG, settingsJSON)
          .then((res) => {
            if (res.status) {
              // this.hasSubmitted = true
              this.loading = false
              this.$message({
                type: 'success',
                message: this.LANG.UPDATE_SUCCESS
              })
            }
          })
          .catch((err) => {
            this.loading = false
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .fks-divider--horizontal {
  margin: 0;
}

::v-deep .fks-input-number {
  span {
    background: #fff;
  }

  .fks-input__inner {
    background: #fff !important;
  }
}

::v-deep .fks-input.is-disabled .fks-input__inner {
  background: rgba(239, 240, 245, 0.3);
}

::v-deep .inputx {
  .fks-input__inner {
    width: 280px;
    border: none;
    background: rgba(239, 240, 245, 0.3);
  }
}

::v-deep .fks-tooltip__popper {
  .tips-container {
    font-size: 20px;
    line-height: 16px;
  }
}

.account-container {
  width: 100%;
  min-width: 720px;
  height: 100%;
  padding-top: 56px;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 14px;
  background-color: white !important;

  .title {
    display: flex;
    font-weight: bold;
    font-size: 16px;
    color: #191919;
  }

  .row-content-container {
    padding: 0 24px;
    margin: 24px 0 36px;
    border: 1px solid #eee;
    border-radius: 8px;

    .row-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 64px;
    }
  }
}
</style>